<!--
 * @Author: ૮₍ ˙О˙₎ა
 * @Date: 2023-08-04 23:32:59
-->
<template>
  <div class="categoryList">
    <!-- 左侧 -->
    <div class="categoryList-left">
      <!-- 左侧 侧边导航 -->
      <van-sidebar v-model="active">
        <van-sidebar-item
          @click="getCategoryId(item.id)"
          v-for="item in categoryList"
          :key="item.id"
          :title="item.name"
        />
      </van-sidebar>
    </div>
    <!-- 右侧 -->
    <div class="categoryList-right">
      <OtherView :goodsTitle="goodsTitle" :bannerImg="bannerImg" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import OtherView from './Other/index.vue'
import { reqCategory, reqCategory2Data } from '@/api/categoryList'
import type { IResBannerList, IResCateGroupList } from '@/types/categoryList'

// 点击导航 当前导航的索引
const active = ref(0)

// 声明分类列表数据
const categoryList = ref<IResCateGroupList[]>()
// 右侧大图赋值
const bannerImg = ref<IResBannerList[]>([])
// 右侧商品 title
const goodsTitle = ref<IResCateGroupList[]>([])

// 切换导航项时触发的事件
const getCategoryId = async (id: any) => {
  // console.log(id)
  // 调用api获取二级分类数据
  const result = await reqCategory2Data(id)
  // console.log(result)
  // 进行赋值
  // 右侧顶部大图
  bannerImg.value = (result.data as any).currentCategory.bannerList
  // bannerImg.value = result.data.currentCategory?.bannerList
  // 右侧商品title
  goodsTitle.value = (result.data as any).categoryGroupList
}

// 获取分类列表数据
const getCate = async () => {
  // 调用api获取数据
  const res = await reqCategory()
  // console.log(res)
  // 进行赋值
  // 左侧导航栏数据
  categoryList.value = res.data.categoryL1List
}

onMounted(() => {
  // 调用获取分类列表数据方法
  getCate()
  getCategoryId(11)
})
</script>

<script lang="ts">
export default {
  name: 'ListView'
}
</script>

<style lang="less" scoped>
.categoryList {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #dbd9d9;
}

.categoryList-left {
  padding: 0px;
  width: 90px;
  border-right: 1px solid #dbd9d9;
  box-sizing: border-box;
}
.categoryList-right {
  width: 287px;
  padding: 5px;
  box-sizing: border-box;
}
</style>
